/* 头部开始 */

.top {
    background-color: #333;
}

.top .container {
    width: 1226px;
    height: 40px;
    margin: 0 auto;
    line-height: 40px;
    font-size: 12px;
    color: #b0b0b0;
    position: relative;
}

.top .container .link a:hover {
    color: #fff;
}

.top .container .shop_car a:hover {
    color: #fff;
}

.top .container .link a {
    color: #b0b0b0;
}

.top .container .shop_car a {
    color: #b0b0b0;
}

.top .container .link {
    float: left;
}

.top .container .login {
    float: right;
    margin-left: 1em;
    background-color: #424242;
    padding: 0 1em;
}

.top .container .login:hover {
    background-color: #fff;
    color: #ff6700;
}

.top .container .shop_car {
    float: right;
}

.top .container .login .dilog {
    width: 316px;
    position: absolute;
    right: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

.top .container .login:hover .dilog {
    text-align: center;
    cursor: pointer;
    animation-name: dilog;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}


/* 头部结束 */


/* 导航开始 */

.nav {
    border-bottom: 1px solid #ededed;
    position: relative;
}

.nav .container {
    width: 1226px;
    height: 100px;
    margin: 0 auto;
}

.nav .container .logo {
    width: 62px;
    height: 56px;
    float: left;
    background-color: #ff6700;
    margin-top: 22px;
    border-radius: 22px;
    text-align: center;
    line-height: 56px;
    color: #fff;
    cursor: pointer;
}

.nav .container .header_nav {
    float: left;
    letter-spacing: 1px;
}

.nav .container .header_nav ul li {
    float: left;
    padding: 0 .5em;
}

.nav .container .header_nav ul li:hover {
    color: #ff6700;
    transition: all .2s;
}

.nav .container .header_nav ul {
    height: 100px;
    line-height: 100px;
    padding-left: 2em;
}

.nav .container .header_nav ul::after {
    display: block;
    content: '';
    clear: both;
}

.nav .container .search {
    float: right;
    width: 296px;
    height: 100px;
    line-height: 100px;
}

.nav .container .search input {
    width: 245px;
    height: 50px;
    border: 1px solid #e0e0e0;
    padding-left: 1em;
    outline: 0;
}

.nav .container .search input:focus {
    border: 1px solid #ff6700 !important;
    transition: all .2s;
}

.nav_dilog {
    position: absolute;
    width: 100%;
    background-color: #333;
    border-bottom: 1px solid #ededed;
    left: 0;
    top: 100px;
    /* height: 230px; */
}

.nav .container .header_nav ul:hover .nav_dilog {
    animation-name: nav_dilog;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}


/* 导航结束 */


/* 广告开始 */

.guanggao {
    box-shadow: 0 5px 5px rgba(0, 0, 0, .07);
}

.guanggao .container {
    width: 1226px;
    height: 63px;
    line-height: 63px;
    /* background-color: teal; */
    margin: 0 auto;
}

.guanggao .container .left {
    float: left;
}

.guanggao .container .left h2,
.guanggao .container .left span,
.guanggao .container .left p {
    float: left;
}

.guanggao .container .left h2 {
    font-size: 18px;
    font-weight: 400;
}

.guanggao .container .left p {
    font-size: 12px;
}

.guanggao .container .left p:hover {
    color: #ff6700;
    cursor: pointer;
}

.guanggao .container .left span {
    margin: 0 1em;
}

.guanggao .container .right {
    float: right;
}

.guanggao .container .right a {
    color: #6a6a6a;
    font-size: 14px;
}

.guanggao .container .right a:last-child {
    background-color: #ff6700;
    width: 120px;
    display: inline-block;
    line-height: 3em;
    text-align: center;
    color: #fff;
    font-size: 12px;
}

.guanggao .container .right a:hover {
    color: #ff6700;
}

.guanggao .container .right a:last-child:hover {
    color: #fff;
}


/* 广告结束 */


/* 小米mix4开始 */

.mix {
    height: 2000px;
}


/* 小米mix4结束 */


/* 动画开始 */

@keyframes dilog {
    25% {
        height: 25px;
    }
    50% {
        height: 50px;
    }
    75% {
        height: 75px;
    }
    100% {
        height: 100px;
    }
}

@keyframes nav_dilog {
    25% {
        height: 50px;
    }
    50% {
        height: 100px;
    }
    75% {
        height: 150px;
    }
    100% {
        height: 230px;
    }
}


/* 动画结束 */